const boxes = document.querySelectorAll('.box')

window.addEventListener('scroll', checkBoxes);

checkBoxes()

function checkBoxes() {
  // 窗口内容区域的高度
    const triggerBottom = window.innerHeight / 5 * 4
    boxes.forEach(box => {
      // 元素的上方边框到视窗上边的距离
        const boxTop = box.getBoundingClientRect().top
        if (boxTop < triggerBottom) {
          // 如果元素的上方边框到视窗上边的距离 小于 窗口内容区域的高度 / 5 就添加一个从左往中间的盒子
          // 第一个盒子里上面90，小于窗口高度 第二个是367 第三个为618 因为我的浏览器视口宽度为910 所以窗口内容区域的高度=910/5*4 = 728
          // 所以只能放三个盒子  往下拉视口高度变大，继续增加盒子，往上就是高度减少。盒子会移除show，
            box.classList.add('show')         
        } else {
          // 偶数向左跑，奇数向右跑
            box.classList.remove('show')
        }
    })
}